import { Input, Spin } from 'antd'
import React, { useState, useTransition } from 'react'

/**
 * 用于在处理异步操作时提供平滑的过渡效果；
 * 可以帮助你在组件的状态变化时，以动画的方式过渡到新的状态。
 */
const UseTransitionComponent: React.FC = () => {
  const [list, setList] = useState<Array<number | string>>([])
  const [isPending, startTransition] = useTransition() // 更新过程

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const arr = new Array(5).fill(e.target.value)
    startTransition(() => {
      setList([...list, ...arr])
    })
  }
  return (
    <>
      <Input type="text" onChange={handleChange} />
      <>
        {isPending ? (
          <Spin>loading...</Spin>
        ) : (
          list.map((item, i) => {
            return <b key={i}>{item}</b>
          })
        )}
      </>
    </>
  )
}
export default UseTransitionComponent
